<template>
  <el-dialog
    title="添加员工"
    :visible="dialogShow"
    width="480px"
    :close-on-click-modal="false"
    @close="closeDialog"
    @open="render"
  >
    <!-- 表单接口 -->
    <div class="form-container">
      <el-form ref="addForm" label-width="80px" :model="list" :rules="rules">
        <el-form-item label="选择租户" prop="enterpriseId">
          <el-select v-model="list.enterpriseId" placeholder="请选择租户">
            <el-option
              v-for="item in enterpriseList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="租赁楼宇" prop="buildingId">
          <el-select v-model="list.buildingId" placeholder="请选择租赁楼宇">
            <el-option
              v-for="item in floorList"
              :key="item.id"
              :value="item.id"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="缴费周期" prop="timeArr">
          <el-date-picker
            v-model="list.timeArr"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            @change="payAll"
          />
        </el-form-item>
        <el-form-item label="支付金额" prop="paymentAmount">
          <el-input v-model="list.paymentAmount" :disabled="true" />
        </el-form-item>
        <el-form-item label="支付方式" prop="paymentMethod">
          <el-select v-model="list.paymentMethod" placeholder="请选择支付方式">
            <el-option label="微信" value="1" />
            <el-option label="支付宝" value="2" />
            <el-option label="现金" value="3" />
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <el-button size="mini" @click="closeDialog">取 消</el-button>
      <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import { addPropertyAPI, checkAllCompanyAPI, checkAllFloorAPI, checkDetailAPI, payAllAPI } from '@/api/property'
export default {
  name: 'Oooop',
  props: {
    dialogShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: {
        enterpriseId: '',
        buildingId: null,
        paymentAmount: null,
        timeArr: [],
        paymentMethod: null
      },
      paymentMethod: null,
      enterpriseList: [],
      floorList: [],
      rules: {
        enterpriseId: [
          { required: true, message: '请选择租户', trigger: 'blur' }
        ],
        buildingId: [
          { required: true, message: '请选择租赁楼宇', trigger: 'blur' }
        ],
        timeArr: [
          { required: true, message: '缴费周期', trigger: 'blur' }
        ],
        paymentAmount: [
          { required: true, message: '支付金额', trigger: 'blur' }
        ],
        paymentMethod: [
          { required: true, message: '请选择支付方式', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeDialog() {
      this.$emit('closeDialog')
      this.$refs.addForm.resetFields()
      this.list = {
        enterpriseId: '',
        buildingId: null,
        paymentAmount: null,
        timeArr: [],
        paymentMethod: null
      }
    },
    render() {
      this.checkAllCompany()
      this.checkAllFloor()
    },
    confirm() {
      this.$refs.addForm.validate(async flag => {
        if (!flag) return
        const { enterpriseId, buildingId, paymentAmount, paymentMethod } = this.list
        await addPropertyAPI({
          startTime: this.list.timeArr[0],
          endTime: this.list.timeArr[1],
          enterpriseId,
          buildingId,
          paymentAmount,
          paymentMethod
        })
        this.$message.success('添加成功')
        this.$emit('closeDialog')
      })
    },
    async checkAllCompany() {
      const res = await checkAllCompanyAPI()
      this.enterpriseList = res.data
    },
    async checkAllFloor() {
      const res = await checkAllFloorAPI()
      this.floorList = res.data
    },
    async checkDetail(id) {
      const res = await checkDetailAPI(id)
      this.list = res.data
    },
    async payAll() {
      const buildingId = this.list.buildingId
      const { data } = await payAllAPI({ buildingId, startTime: this.list.timeArr[0],
        endTime: this.list.timeArr[1] })
      this.list.paymentAmount = data
    }
  }
}
</script>
<style lang="less" scoped>

</style>
